W systemie kopmutera są zainstalwoane liczne cziocnki. Możliwe jest, że strona wykorzystuje czcionkę, któej nie ma w systemie konkretnego komputera. Przegląarka przedstawia wówczas standardową czionkę dostępnąw systemie, k tóa może wyglądać zupełnie inaczej niż planowana. Tworząc stronę, warto zadbaćo to, aby czcionka wyświetlana, była taka sama lub przynajmniej zbliżona do zaplanowanej. CSS grupuje cziocnki w/g okręślonych cech, a w ięc podobnych do siebie, w grupy nazywane rodzinami(family). Tych rodzin jest pięć:
| Nazwa rodziny | Opis | Przykłądowa czcionka |
|---|---|---|
| Serif | Cziocnki szeryfowe, posiadają dekorację zakończenia liter | Georgia, Bodoni,New Times Toman |
| Sans-serif | Bez szeryfowe; proste zakończenia liter | Arial, Verdena, Futura |
| Mono space | Monotypiczne; stałą szerokość znaku | Courier, Courier New |
| cursive | Pochylone;"pismo ręczne" | Cominc Sans Ms, Florence |
| fantasy | dekoracyjne | Impact, Old Town |
Istnieje możliwość podania wielkości czcionki w jednostkach bezwględnych: mm, cm, in, pt, px... Można także podać jako większą - larger
styl czcionki to ew. pochylenie, wprowadzane przez font-size:wartosc. mozliwe wartosci:
-normal
-italic - pochylona
-oblique - dzialanie jak italic
wariant czcionki pozwala na wybor pomiedzy normalnym a kapitalikami, czyli wyswietlaniem wielkich liter w rozmiarze malych liter.
tekst normalny
takst ze stylem "font-variant:small-caps"
Grubosc czcionki realizowana w html znacznikiem <b> w css posiada deklaracie "font-weight:wartosc".Mozliwe wartosci to liczby od 100 do 900 z interwalem 100 , dajace coraz grubszy tekst . Innymi wartosciami sa >normal i bold ewentulanie lighter albo bolder
odstepy miedzy wierszami ustalamy deklaracja line-height, wartosciami moga byc jednostki procentowe lub bezwzgledne (mm,cm,px...).Ten akapit posiada odleglosaci miedzy liniami o wielkosci 30 px .
Mozna polaczyc wiele artrybutow w jednym wpisie . wowczas po elemencie font stawiami dwukropek (:) i wpisujemy wartosci odczielone spacjami (kolejnosc dowolna ). wyjatkiem jest odleglosc miedzi liniami ; wymaga poprzedzenia znakiem (/).
Można połączyć wiele atrybutów w jednej deklaracjii. Wówczas po elemencie font stawiamy dwukropek (:) i wpisujemy
wartości oddzielone spacjami w kolejności:
- font-style
- font-variant
- font-weight
- font-size
- line-height
- font-family
Zmiana kolejności może skutkować nieprawidłowym odczytem wartości lub pominięciem cechy. Wyjątkiem jest odległość między linniami;
wymaga poprzedzenia znakiem (/).
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli
Polecenie pozwala ustalić dowolny kolor tekstu:
selektor { color: kolor }
kolor red
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli Natomiast jako "dekoracja" należy podać: -none - bez zmian -underline - podkreślenie -line-through - przekreślenie -overline - nadkreślenie -blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)
dekoracja none
dekoracja underline
dekoracja line-through
dekoracja overline
dekoracja blink
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli Natomiast jako "transformacja" należy podać: -none - bez zmian -capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie -uppercase - zamiana wszystkich liter na wielkie -lowercase - zamiana wszystkich liter na małe
To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none...
To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize...
To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase...
To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase...
Selektorem może być dowolny znacznik wyświetlany w bloku, np. p - akapit, h1 - tytuł czy td - komórka tabeli Natomiast jako "wyrównanie" należy podać: left - wyrównanie tekstu do lewego marginesu (domyślnie) right - wyrównanie do prawego marginesu center - do środka (wyśrodkowanie) justify - do obu marginesów jednocześnie (justowanie)
wyrównanie left (domyślnie)
wyrównanie left - do lewego marginesu
left
wyrównanie tekstu right
wyrównanie right - do prawego marginesu
right
wyrównanie center (wyśrodkowanie)
wyrównanie center - do środka
center
Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie...
Selektorem może być każdy znacznik wyświetlany w bloku. Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości. Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).
To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm...
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
-poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
-pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
-rozmycie - promień efektu rozmycia (opcjonalnie)
-kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.
Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.
Aby zupełnie usunąć ustalony wcześniej cień, należy podać text-shadow: none
Powyższe polecenie pozwala wprowadzić efekt cienia pod tekstem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.
text-shadow: 0.2em 0.2em
text-shadow: 3px 3px 5px red
text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli
Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości.
Wpisanie "normal" przywróci wartość domyślną.
Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku. Dzięki temu linijki mogą być bardziej ścieśnione lub rozciągnięte.
To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej ścieśnione lub rozciągnięte.
To jest akapit, w którym odstępy między wyrazami wynoszą 1cm
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli. Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną. Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty.
To jest akapit, w którym odstępy między literami wynoszą 3mm
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].
Natomiast jako "sposób" należy podać:
- normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie)
- pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
- nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika
- pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5, Firefox 3, Chrome, Konqueror)
- pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną
Polecenie pozwala sterować wyświetlaniem spacji na ekranie. Domyślnie nie jest możliwe postawienie obok siebie kilku spacji, ponieważ zostaną one automatycznie zamienione na jedną. Nie można również postawić spacji na początku wiersza. Dzięki użyciu komendy white-space: pre, możemy pozbyć się tych niedogodności. Polecenie działa podobnie jak znacznik <pre>...</pre>, lecz tekst jest napisany zwykłą czcionką.
Ponadto deklaracja white-space: nowrap uniemożliwia przeglądarce przełamanie wiersza i przejście do następnej linii. Stosuje się je, gdy koniecznie zależy nam, aby podany tekst, był wpisany w jednej linijce. Jeśli nie zmieści się on na ekranie, pojawi się suwak do przewijania zawartości strony. Wiersz taki możemy przełamać tylko poprzez zastosowanie znacznika
. Komenda działa podobnie jak <nobr>...</nobr>.
Tu jest dziesięć spacji: ...ale ponieważ użyto white-space: normal, więc zostaną one zamienione na jedną (domyślnie).
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre, więc nie zostaną one zamienione na jedną (powinny być widoczne na ekranie). Dodatkowo wiersz nie zostanie przełamany, aż do momentu napotkania znaku końca linii (klawisz Enter wpisany w edytorze - nie trzeba stosować znacznika <br />). Tutaj znajduje się przełamanie linii ...a tutaj jest następna linijka rozpoczynająca się tabulatorem.
Tu jest dziesięć spacji: ...ale ponieważ użyto white-space: nowrap, więc zostaną one zamienione na jedną.
Natomiast ten wiersz nie powinien być nigdy przełamany... przełamany... przełamany... przełamany...
przełamany... przełamany... przełamany... przełamany..., chyba że pojawi się znacznik<br />
...wtedy tekst zostanie przeniesiony do następnej linii.
Poniższe polecenia mogą być nieinterpretowane:
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre-wrap, więc nie zostaną one zamienione na jedną (powinny być widoczne na ekranie). ...a tutaj jest następna linijka rozpoczynająca się tabulatorem. Dodatkowo wiersz zostanie przełamany automatycznie, jeśli nie zmieści się w szerokości ekranu albo po napotkaniu znaku nowej linii (klawisz Enter).
Tu jest dziesięć spacji: ...i ponieważ użyto white-space: pre-line, więc zostaną one zamienione na jedną. Dodatkowo wiersz zostanie przełamany automatycznie, jeśli nie zmieści się w szerokości ekranu albo po napotkaniu znaku nowej linii (klawisz Enter).